<template>
    <div class="Home">
        <transition name="screenSwitch">
            <div class="filter_box" v-show="screenSwitch">
                <transition name="screenSwitchCon">
                    <div v-show="screenSwitchCon" class="filter_box_con">
                        <ul class="filter_box_con_c">
                            <li>
                                <p></p>
                                <span>分享到微信</span>
                            </li>
                            <li>
                                <p></p>
                                <span>分享到朋友圈</span>
                            </li>
                            <li>
                                <p></p>
                                <span>分享到QQ</span>
                            </li>
                            <li @click="downLoadImg()">
                                <!-- <a :href="imgUrl"> -->
                                    <p></p>
                                    <span>下载图片</span>
                                <!-- </a> -->
                            </li>
                        </ul>
                        <p class="cancle_btn" @click="cancleBtn()">取消</p>
                    </div>
                </transition>
            </div>
        </transition>
            <div class="filter_box2" v-show="screenSwitch2" 
            v-loading="screenSwitch2"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
            
            >

            </div>


        <div class="goBack">
            <img src="" alt="">
        </div>
        <p class="active_rule" @click="toActiveRule()">活动规则</p>
        <div class="box">
            <h1>邀请好友&nbsp;得600积分</h1>
            <div id="activityDiv">
                <swiper :options="swiperOption" ref="mySwiper" id="activityUl" class=''>
                    <swiper-slide class="swiper-slide games activityLi" v-for="(item,index) in listData" :key="index" ref="mySwiperItem">
                        <div class='swiper-slide_con'>
                            <div class="backImg" :style="{backgroundImage:'url('+item.img+')' }">
                                <textarea @focus="setClickOnce()" name="activityLiText" id="activityLiText" cols="30" rows="4" v-model.trim="item.activityLiText"></textarea>
                            </div>
                            <div class="liBottom">
                                <div class="liText">
                                    <p class="liTtitle">{{item.lititle}}</p>
                                    <p class="liDes">邀请你一起看书</p>
                                    <p class="liDes">识别二维码,看精选好书</p>
                                </div>
                                <div class="QRcode" ref="qrcode"></div>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
                <p class="peopleNum">你已成功邀请{{peopleNum}}位好友加入畅想></p>
                <div id="canvasImg"></div>
            </div>
            <p class="invitation_btn" id="invitationBtn" @click="shareBtn()">立即邀请</p>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "Home",
  data() {
    const _self = this;
    return {
      listData: [
        {
          lititle: "我是一抹蓝1",
          img: require("../../static/img/cart1.png"),
          activityLiText: "纵里寻她千百度,默然回首,那人却在灯火阑珊处"
        },
        {
          lititle: "我是一抹蓝2",
          img: require("../../static/img/cart1.png"),
          activityLiText: "纵里寻她千百度,默然回首,那人却在灯火阑珊处"
        },
        {
          lititle: "我是一抹蓝3",
          img: require("../../static/img/cart1.png"),
          activityLiText: "纵里寻她千百度,默然回首,那人却在灯火阑珊处"
        }
      ],
      liWidth: 0,
      liNum: 0,
      startX: 0,
      endX: 0,
      currantIndex: 1,
      test: false,
      peopleNum: 0 /*成功邀请好友数 */,
      activityLiText: "" /*编辑的文字 */,
      swiperOption: {
        slideActiveClass: "add_transform",
        slideDuplicateClass: "remove_transform",
        slideNextClass: "remove_transform",
        slidePrevClass: "remove_transform",
        //   width:"638",
        autoplay: false /*是否自动循环*/,
        speed: 500, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
        loop: true, //循环切换
        grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: false, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: false, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
        scrollbar: ".swiper-scrollbar",
        mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
        observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        pagination: {
          el: ".swiper-pagination", // type : 'progressbar', //分页器形状
          clickable: true //点击分页器的指示点分页器会控制Swiper切换
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        on: {
          init() {}
        }
      },
      screenSwitch: false,
      screenSwitchCon: false,
      screenSwitch2: false,
      bgName: "" /*当前图片名字 */,
      imgUrl: "" /*下载图片地址 */,
      clickOnce: 0 /*控制下载图片按钮不能连续点击 */
    };
  },
  mounted() {
    this.qrcode();
  },
  methods: {
    toActiveRule() {
      this.$router.push("/activeRule");
    },
    /*初始生成二维码*/
    qrcode() {
      let qrcodeWidth = document.querySelectorAll(".QRcode")[0].offsetWidth;
      let qrcodeHeight = document.querySelectorAll(".QRcode")[0].offsetHeight;
      let activityLi = document.querySelectorAll(".activityLi");
      activityLi.forEach(item => {
        let qrcode = new this.QRCode(item.children[0].children[1].children[1], {
          width: qrcodeWidth,
          height: qrcodeHeight, // 高度
          text: "12345678", // 二维码内容,
          render: "canvas" // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        });
      });
    },
    setClickOnce() {
      this.clickOnce = 0;
    },
    /*分享按钮 */
    shareBtn() {
      this.screenSwitch = true;
      this.screenSwitchCon = true;
    },
    // /*下载图片 */
    downLoadImg() {
      let _self = this;
      this.screenSwitch2 = true;
      this.screenSwitch = false;
      this.screenSwitchCon = false;
      let canvasImg = document.querySelector("#canvasImg");
      let activeBox = document.querySelector(".add_transform");
      let activeBoxChildren = document.querySelector(".add_transform")
        .children[0];
      let activeBoxChildrenWidth = activeBoxChildren.offsetWidth;
      let activeBoxChildrenHeight = activeBoxChildren.offsetHeight;
      setTimeout(() => {
        let createdImg = document.querySelectorAll(".createdImg");
        if (createdImg) {
          createdImg.forEach(item => {
            canvasImg.removeChild(item);
          });
        }
        _self
          .html2canvas(activeBox, {
            scale: 2,
            logging: false,
            useCORS: true
          })
          .then(canvas => {
            let img = new Image();
            img.src = canvas.toDataURL("image/jpeg");
            img.setAttribute("class", "createdImg");
            img.setAttribute("width", activeBoxChildrenWidth);
            img.setAttribute("height", activeBoxChildrenHeight);
            canvasImg.appendChild(img);
            let uploadParams = {
              file: img.src
            };
            if (_self.clickOnce == 0) {
              _self.axios
                .post(
                  _self.APIHOST + "upload/uploadFile" + _self.token,
                  uploadParams
                )
                .then(r => {
                  if (r.data.code == "0") {
                    _self.imgUrl = r.data.data.path2;
                    _self.screenSwitch2 = false;
                    _self.clickOnce = 1;
                    setTimeout(function(){window.location.href = r.data.data.path2;},500)
                  } else {
                    this.$message.error('下载图片失败，请稍后重试');
                  }
                });
            } else {
                this.$message.error('请不要连续下载同张图片');
            }
          });
      }, 100);
      let bgImage = activeBox.children[0].children[0].style.backgroundImage;
      this.bgName = bgImage.split("img/")[1].split('")')[0];
    },

    /*取消按钮 */
    cancleBtn() {
      this.screenSwitch = false;
      this.screenSwitchCon = false;
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
@import url(../assets/less/public.less);
.Home {
  @font16();
  .active_rule {
    @font12();
    @color1();
    position: absolute;
    right: 0;
    top: 24px;
    height: 52px;
    width: 112px;
    line-height: 52px;
    text-align: center;
    border-top-left-radius: 26px;
    border-bottom-left-radius: 26px;
    background: -webkit-linear-gradient(
      left,
      @config_bg3,
      @config_bg4
    ); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(
      left,
      @config_bg3,
      @config_bg4
    ); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(
      left,
      @config_bg3,
      @config_bg4
    ); /* Firefox 3.6 - 15 */
    background: linear-gradient(
      left,
      @config_bg3,
      @config_bg4
    ); /* 标准的语法 */
  }
  .box {
    margin-top: 76px;
    overflow: hidden;
    h1 {
      @font24();
      @color3();
      font-weight: bold;
      margin-bottom: 40px;
    }
    .peopleNum {
      text-align: center;
      margin: 36px auto 52px;
      @font14();
      @color5();
    }
    #canvasImg {
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .invitation_btn {
      width: 690px;
      height: 102px;
      background: @config_bg5;
      @color1();
      line-height: 102px;
      text-align: center;
      border-radius: 102px;
      margin: 0 auto;
      @font15();
    }
    #activityDiv {
      padding-left: 60px;
      padding-right: 60px;
      box-sizing: border-box;
      .swiper-container {
        overflow: inherit;
      }
      #activityUl {
        position: relative;
        left: 0;
        height: 916px;
        transition: all 0.35s ease-in-out;
        .activityLi {
          float: left;
          .swiper-slide_con {
            width: 618px;
            margin: 0 auto;
            height: 916px;
            border-radius: 20px;
            overflow: hidden;
            background: @config_bg1;
            position: relative;
            @inputTextarea();
            box-shadow: 0 5px 25px 0 rgba(201, 206, 210, 0.4);
          }

          .backImg {
            height: 704px;
            width: 100%;
            background-size: 100%;
            display: table;
            #activityLiText {
              background: none;
              @color1();
              @font16();
              display: block;
              width: 540px;
              padding: 100px 50px;
              line-height: 1.7em;
            }
          }

          .liBottom {
            @flex();
            @justify5();
            padding: 30px 40px;
            box-sizing: border-box;
            .liText {
              text-align: left;
              .liTtitle {
                @font16();
                @color4();
                margin-bottom: 10px;
              }
              .liDes {
                @font12();
                @color5();
                line-height: 1.6em;
              }
            }
            .QRcode {
              width: 132px;
              height: 132px;
              background: @config_bg2;
            }
          }
        }
        .remove_transform {
          transform: translateY(50px);
          -ms-transform: translateY(50px); /* IE 9 */
          -moz-transform: translateY(50px); /* Firefox */
          -webkit-transform: translateY(50px); /* Safari 和 Chrome */
          -o-transform: translateY(50px); /* Opera */
          transition: all 0.5s ease-in-out;
          -moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
          -webkit-transition: all 0.5s ease-in-out; /* Safari 和 Chrome */
          -o-transition: all 0.5s ease-in-out; /* Opera */
        }
        .add_transform {
          transform: translateY(0);
          -ms-transform: translateY(0); /* IE 9 */
          -moz-transform: translateY(0); /* Firefox */
          -webkit-transform: translateY(0); /* Safari 和 Chrome */
          -o-transform: translateY(0); /* Opera */
          transition: all 0.5s ease-in-out;
          -moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
          -webkit-transition: all 0.5s ease-in-out; /* Safari 和 Chrome */
          -o-transition: all 0.5s ease-in-out; /* Opera */
        }
      }
    }
  }
  .filter_box {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    .filter_box_con {
      width: 90%;
      height: 200px;
      position: absolute;
      right: 0;
      left: 50%;
      top: 50%;
      margin-left: -45%;
      margin-top: -100px;
      background: @config_bg1;
      box-sizing: border-box;
      border-radius: 8px;
      .filter_box_con_c {
        @flex();
        @justify5();
        padding: 20px 30px;
        li {
          p {
            width: 80px;
            height: 80px;
            background: @config_bg2;
            border-radius: 8px;
            margin: 0 auto 10px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
  /deep/ .el-loading-spinner{
      .el-icon-loading{
          @color1();
      }
      .el-loading-text{
          @color1();
          @font14();
      }
  }
  .filter_box2 {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    @flex();
    @justify2();
    flex-direction: column;
    z-index: 9;
  }
  .screenSwitch-enter,
  .screenSwitch2-enter {
    opacity: 0;
  }
  .screenSwitch-enter-active,
  .screenSwitch2-enter-active {
    transition: all 0.1s;
    opacity: 1;
  }
  .screenSwitch-leave-active,
  .screenSwitch2-leave-active {
    transition: all 0.5s;
    opacity: 0;
  }
  .screenSwitchCon-enter-active {
    opacity: 1;
    transition: all 0.4s ease;
  }
  .screenSwitchCon-leave-active {
    transition: all 0.3s ease;
  }
  .screenSwitchCon-enter {
    opacity: 0;
    transform: translateY(-2.66666667rem);
  }
  .screenSwitchCon-leave-active {
    opacity: 0;
    transform: translateY(-2.66666667rem);
  }
}
</style>

